<template>
	<div v-if="orderInfo">
		<div class="orderInfo">
			<div class="betweenCenter">
				<img class="img30" :src="recordType[orderInfo.recordType].img" />
				<!-- <div class="text-12 white">{{orderNav[active].title}}</div> -->
				<div class="text-12 white">{{recordType[orderInfo.recordType].title}}</div>
			</div>
		</div>

		<div class="width82 backgroundWhite radius5" style="margin-top: -40px;">
			<div class="text-14 blod padding-bottom-10">
				找货商家
			</div>
			<div>
				<div class="betweenCenter text-14 ">
					<div class="gray">商家名称</div>
					<div>{{orderInfo.memberName}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">联系人</div>
					<div>{{orderInfo.memberName}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">联系电话</div>
					<a :href="'tel:'+orderInfo.memberPhone">
						<div class="default">{{orderInfo.memberPhone}}</div>
					</a>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">联系地址</div>
					<div>{{orderInfo.memberAddress}}</div>
				</div>
			</div>
		</div>

		<div class="width82 backgroundWhite radius5 margin-top-10">
			<div class="text-14 blod padding-bottom-10">
				商品信息
			</div>
			<div>
				<div class="betweenCenter text-14 ">
					<div class="gray">商品名称</div>
					<div>{{orderInfo.goodsName}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">商品ID</div>
					<div>{{orderInfo.goodsId}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">证书编号</div>
					<div>{{orderInfo.certificateItem}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">找货价</div>
					<div>￥{{Number(orderInfo.orderAmount).toFixed(2)}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">实缴预付款</div>
					<div class="orange">￥{{Number(orderInfo.preDeposit).toFixed(2)}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">服务费</div>
					<div class="orange">￥{{Number(orderInfo.serviceFee).toFixed(2)}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">配送方式</div>
					<div>{{orderInfo.deliveryType==1?'取配合一':'取配分离'}}</div><!-- 1.取配和一 2.取配分离 -->
				</div>
			</div>
		</div>

		<div class="width82 backgroundWhite radius5 margin-top-10">
			<div class="text-14 blod padding-bottom-10">
				归属商家
			</div>
			<div>
				<div class="betweenCenter text-14 ">
					<div class="gray">商家名称</div>
					<div>{{orderInfo.sellVendorName}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">联系人</div>
					<div>{{orderInfo.sellMemberName}}</div>
				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">联系电话</div>
					<a :href="'tel:'+orderInfo.sellMemberPhone">
						<div class="default">{{orderInfo.sellMemberPhone}}</div>
					</a>

				</div>
				<div class="betweenCenter text-14 padding-top-5">
					<div class="gray">联系地址</div>
					<div>{{orderInfo.sellMemberAddress}}</div>
				</div>
			</div>
		</div>

		<div class="width82 backgroundWhite radius5 margin-top-10">
			<div class="text-14 blod padding-bottom-10">
				订单信息
			</div>
			<div>
				<div class="text-14 " style="color: #686868;">
					订单状态:{{recordType[orderInfo.recordType].title}}</div>
				<div class="text-14 padding-top-5" style="color: #686868;">订单编号:{{orderInfo.orderCode}}</div>
				<div class="text-14 padding-top-5" style="color: #686868;" v-for="(info,i) in orderDataInfoContent"
					:key="i">
					{{info.name}}:{{info.dataContent}}
				</div>
			</div>
		</div>

		<!-- 取配分离 -->
		<div class="width82 backgroundWhite radius5 margin-top-10"
			v-if="orderInfo.getGoodsDeliveryInfo.content.length>0">
			<!-- orderInfo.deliveryType==2 -->
			<div class="text-14 blod padding-bottom-10" v-if="orderInfo.deliveryType==2">
				{{deliverymanType==1?"异地配送员信息":"异地取货员信息"}}
			</div>
			<div class="text-14 blod padding-bottom-10" v-if="orderInfo.deliveryType==1">
				取货配送员信息
			</div>
			<div>
				<div v-for="(info,index) in orderInfo.getGoodsDeliveryInfo.content" :key="index" v-if="index<=2">
					<div class="betweenCenter text-14 padding-bottom-5" v-if="info.dataContent">
						<div class="gray">{{info.name}}</div>
						<a v-if="info.name.includes('电话')" :href="'tel:'+info.dataContent" class="flex-row">
							<div style="color: #333333;">{{info.dataContent}}</div>
						</a>
						<div v-else>{{info.dataContent}}</div>
					</div>

				</div>

			</div>
		</div>
		
		<div class="width82 backgroundWhite radius5 margin-top-10"
			v-if="orderInfo.getGoodsDeliveryInfo.content.length>0&&orderInfo.deliveryType==2&&(orderInfo.recordType==2||orderInfo.recordType==3||orderInfo.recordType==5)">
			<!-- orderInfo.deliveryType==2 -->
			<div class="text-14 blod padding-bottom-10" >
				异地配送员信息
			</div>
			<div>
				<div v-for="(info,index) in orderInfo.getGoodsDeliveryInfo.content" :key="index" v-if="index>2">
					<div class="betweenCenter text-14 padding-bottom-5" v-if="info.dataContent">
						<div class="gray">{{info.name}}</div>
						<a v-if="info.name.includes('电话')" :href="'tel:'+info.dataContent" class="flex-row">
							<div style="color: #333333;">{{info.dataContent}}</div>
						</a>
						<div v-else>{{info.dataContent}}</div>
					</div>
		
				</div>
		
			</div>
		</div>

		<!-- 取配分离 -->
		<div class="width82 backgroundWhite radius5 margin-top-10"
			v-if="orderInfo.logisticsName&&orderInfo.logisticsNum">
			<!-- orderInfo.deliveryType==2 -->
			<div class="text-14 blod padding-bottom-10">
				物流信息
			</div>
			<div>
				<div class="padding-bottom-5 betweenCenter">
					<div class="gray text-14">物流公司:{{orderInfo.logisticsName}}</div>
				</div>
				<div class=" padding-bottom-5 betweenCenter" @click="copy(orderInfo.logisticsNum)">
					<div class="gray text-14">物流单号:{{orderInfo.logisticsNum}}</div>
					<img class="img12" src="../assets/images/copy.png" />
				</div>
			</div>
		</div>
		
		<!-- 退货取配分离 -->
		<div class="width82 backgroundWhite radius5 margin-top-10"
			v-if="orderInfo.outGoodsDeliveryInfo.content.length>0">
			<!-- orderInfo.deliveryType==2 -->
			<!-- 1.取货员 2.配送员 3.退货取货员 4.退货配送员 -->
			<div class="text-14 blod padding-bottom-10" v-if="orderInfo.deliveryType==2">
				{{deliverymanType==3?"退货异地配送员信息":"退货异地取货员信息"}}
			</div>
			<div>
				<div v-for="(info,index) in orderInfo.outGoodsDeliveryInfo.content" :key="index">
					<div class="betweenCenter text-14 padding-bottom-5" v-if="info.dataContent">
						<div class="gray">{{info.name}}</div>
						<a v-if="info.name.includes('电话')" :href="'tel:'+info.dataContent" class="flex-row">
							<div style="color: #333333;">{{info.dataContent}}</div>
						</a>
						<div v-else>{{info.dataContent}}</div>
					</div>
		
				</div>
		
			</div>
		</div>
		
		<!-- 退货取配分离 -->
		<div class="width82 backgroundWhite radius5 margin-top-10"
			v-if="orderInfo.outLogisticsName&&orderInfo.outLogisticsNum">
			<!-- orderInfo.deliveryType==2 -->
			<div class="text-14 blod padding-bottom-10">
				退货物流信息
			</div>
			<div>
				<div class="betweenCenter text-14 padding-bottom-5">
					<div class="gray">物流公司:{{orderInfo.outLogisticsName}}</div>
				</div>
				<div class="betweenCenter text-14 padding-bottom-5" @click="copy(orderInfo.outLogisticsNum)">
					<div class="gray">物流单号:{{orderInfo.outLogisticsNum}}</div>
					<img class="img12" src="../assets/images/copy.png" />
				</div>
			</div>
		</div>



		<!-- 底部按钮 -->
		<div style="height: 50px;"></div>
		<div class="borderBtn rowReverse">

			<div class="solidBtn margin-left-10" v-if="orderInfo.recordType==0||orderInfo.recordType==2" @click="clickPickup()">确认取货</div>
			
			<!-- <div class="solidBtn margin-left-10" v-if="active==3" @click="clickPickup()">确认取货</div> -->
			
			<div class="solidBtn margin-left-10" v-if="((orderInfo.recordType==1&&deliverymanType==1)||(orderInfo.recordType==3&&deliverymanType==3))&&orderInfo.deliveryType==2"
				@click="onLogistics()">上传物流</div><!-- 待验货，取配分离deliveryType取货员deliverymanType -->
			
			<div class="solidBtn margin-left-10" v-if="orderInfo.recordType==1"
				@click="onInspection()">验货失败</div>
			<div class="solidBtn margin-left-10" v-if="orderInfo.recordType==1"
				@click="onInspectionsuccess()">验货通过</div>
			<!-- <div class="solidBtn margin-left-10" v-if="active==4&&deliverymanType==3&&orderInfo.deliveryType==2"
				@click="onLogistics()">上传物流</div> --><!-- 待收货，取配分离退货取货员 -->
				
			<div :class="[(orderInfo.recordType==0||orderInfo.recordType==2)?'strokeBtn':'solidBtn']" class="margin-left-10"
				@click.stop="toVoucher()">货品凭证</div>
		</div>

		<!-- 物流信息 -->
		<van-popup v-model="showLogistics" round>
			<div class="text-16" style="width: 80vw;">
				<div style="text-align: center;padding: 10px 0;position: relative;">
					上传物流信息
					<div style="position: absolute;right: 10px;top: 10px;" @click="showLogistics=false">
						<van-icon size="16" name="cross" />
					</div>

				</div>
				<div>
					<van-form @submit="onSubmit">
						<van-field v-model="logisticsName" name="logisticsName" label="物流公司" placeholder="请输入物流公司"
							:rules="[{ required: true, message: '请输入物流公司' }]" />
						<van-field v-model="logisticsNum" name="logisticsNum" label="物流单号" placeholder="请输入物流单号"
							:rules="[{ required: true, message: '请输入物流单号' }]" />
						<div style="margin: 16px;">
							<van-button style="width: 70vw;margin: auto;" :color="colorBtn" type="primary" round>确认
							</van-button>
						</div>
					</van-form>
				</div>

				<!-- <div style="width: 70vw;margin: auto;padding: 30px 0;">
					
				</div> -->
			</div>
		</van-popup>

	</div>
</template>

<script>
	import BaseView from "@/views/BaseView.vue"
	import {
		Toast
	} from 'vant';
	import {
		Dialog
	} from 'vant';
	export default {
		extends: BaseView,
		data() {
			return {
				title: "配送订单",
				orderNav: [{
						title: "待取货",
						img: require("@/assets/images/detail/detail1.png")
					},
					{
						title: "待验货",
						img: require("@/assets/images/detail/detail2.png")
					},
					{
						title: "已验货",
						img: require("@/assets/images/detail/detail3.png")
					},
					{
						title: "待退回",
						img: require("@/assets/images/detail/detail4.png")
					},
					{
						title: "待收货",
						img: require("@/assets/images/detail/detail5.png")
					},
					{
						title: "已退回",
						img: require("@/assets/images/detail/detail6.png")
					}
					// {
					// 	title:"已取消",
					// 	img:require("@/assets/images/detail/detail7.png")
					// }
				],
				recordType:[
					{
						title: "待取货",
						img: require("@/assets/images/detail/detail1.png")
					},
					{
						title: "待验货",
						img: require("@/assets/images/detail/detail2.png")
					},
					{
						title: "待退回",
						img: require("@/assets/images/detail/detail4.png")
					},
					{
						title: "待收货",
						img: require("@/assets/images/detail/detail5.png")
					},
					{
						title: "已验货",
						img: require("@/assets/images/detail/detail3.png")
					},
					{
						title: "已退回",
						img: require("@/assets/images/detail/detail6.png")
					},
					{
						title: "",
						img: ""
					},
					{
						title: "已删除",
						img: ""
					}
				],//0.待取货 1.待验货 2 .待退回 3.待收货 4.已验收5.已退回 7.已删除
				active: 0,
				distributionMode: 0, //1取配合一2取配分离
				showPickUp: false, //取货
				showVoucher: false, //付费凭证
				showInspection: false, //验货
				showLogistics: false, //物流
				showGoods: false, //货品
				showReturnGoods: false, //退回取货
				company: "",
				logisticsName: "", //物流公司
				logisticsNum: "",
				orderId: 0,
				deliverymanType: 1, //（1.取货员 2.配送员 3.退货取货员 4.退货配送员）
				orderInfo: "",
				orderDataInfoContent: [] //订单信息时间
			}
		},
		created() {
			this.active = this.$route.query.active
			this.orderId = this.$route.query.orderId
			this.deliverymanType = this.$route.query.deliveryManType
			this.getOrderDetail()

		},
		methods: {
			getOrderDetail() {
				this.$axios.get("/delivery/base/getOrderInfo", {
					params: {
						orderId: this.orderId,
						deliveryManType: this.deliverymanType
					}
				}).then(res => {
					console.log("订单详情", res)
					if (res.code == 1) {
						this.orderInfo = res.data
						this.orderDataInfoContent = this.orderInfo.orderDataInfo.content
					}
				})
			},
			afterRead(file) {
				console.log("文件上传", file)
			},
			clickVoucher() {
				this.showVoucher = true
			},
			//取货
			onPickUp() {

			},
			//物流弹框
			onLogistics() {
				this.showLogistics = true
			},
			//物流提交
			onSubmit(value) {
				value.orderId = this.orderId
				console.log("物流信息", value)
				this.$axios.post("/order/delivery/addOrderLogisticsData", value).then(res => {
					console.log("物流提交", res)
					Toast(res.msg)
					this.showLogistics = false
				})
			},
			//退回取货
			onReturnGoods() {

			},
			//确认退回
			onReceiving() {
				Dialog.confirm({
						title: '确认提示',
						message: '该订单是否确定退回？',
						confirmButtonColor: "#3CCC77"
					})
					.then(() => {
						// on confirm
						console.log("确定")
					})
					.catch(() => {
						// on cancel
						console.log("取消")
					});
			},
			//跳转凭证上传
			toVoucher() {
				this.$router.push({
					path: "/voucher",
					query: {
						orderId: this.orderInfo.id,
						orderState: this.orderInfo.recordType
					}
				})
			},
			//验货失败
			onInspection(){
				Dialog.confirm({
						title: '确认验货',
						message: '请确认此货品未通过验货',
						confirmButtonColor: "#3CCC77"
					})
					.then(() => {
						// on confirm
						this.$axios.post("/order/delivery/inspectionOrder", 
						{orderId: this.orderId}
						).then(res => {
							console.log("待取货确认取货", res)
							Toast(res.msg);
							this.getOrderDetail()
						})
					})
					.catch(() => {
						// on cancel
					});
			},
			//验货通过
			onInspectionsuccess(){
				Dialog.confirm({
						title: '确认验货',
						message: '请确认此货品通过验货',
						confirmButtonColor: "#3CCC77"
					})
					.then(() => {
						// on confirm
						this.$axios.post("/delivery/base/confirmPass", {
							orderId: this.orderId
						}).then(res => {
							console.log("确认验货", res)
							Toast(res.msg);
							this.getOrderDetail()
						})
					})
					.catch(() => {
						// on cancel
					});
			},
			//确认取货
			clickPickup() {
				Dialog.confirm({
						title: '确认取货',
						message: '请确认是否取货',
						confirmButtonColor: "#3CCC77"
					})
					.then(() => {
						// on confirm
						if (this.orderInfo.recordType == 0) { //（待取货）
						console.log("待取货确认")
							this.$axios.post("/order/delivery/affirmClaimGoods", {
								orderId: this.orderId
							}).then(res => {
								console.log("待取货确认取货", res)
								Toast(res.msg);
								this.getOrderDetail()
							})
						} else if (this.orderInfo.recordType == 2) { //待退回
						console.log("待退回确认")
							this.$axios.post("/order/delivery/affirmRetreatGoods", {
								orderId: this.orderId
							}).then(res => {
								console.log("待退回确认取货", res)
								Toast(res.msg);
								this.getOrderDetail()
							})
						}
					})
					.catch(() => {
						// on cancel
					});
			},
			//复制
			copy(e) {
				this.$copyText(e).then(function(e) {
					console.log('复制成功', e)
					Toast("复制成功")
				}, function(e) {
					console.log("复制失败", e)
					Toast("复制失败")
				})
			}

		}
	}
</script>

<style>
	.orderInfo {
		width: 100vw;
		height: 170px;
		background-image: url(../assets/images/myBg.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
